<template>
  <div>
    <el-row>
      <!-- <el-button type="primary" style="margin-top: 3px" @click="saoma"
        >扫码</el-button
      > -->
      <el-input
        ref="inputRef"
        v-model="biaoqianma"
        placeholder="请扫描标签码"
        style="width: 50%"
        :disabled="isInputDisabled"
        @change="handleInputChange"
      ></el-input>
      <el-button
        type="primary"
        style="margin-top: 3px; margin-left: 40%"
        @click="daochu"
        >导出</el-button
      >

      <el-col style="margin-top: 10px">
        <el-table
          class="box-table"
          :data="Data"
          :stripe="true"
          :border="true"
          :fit="true"
          v-if="Data != null"
        >
          <el-table-column
            prop="index"
            label="序号"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="idcard"
            label="身份证号"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="acquisitionDate"
            label="创建时间"
            width="auto"
            align="center"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            width="auto"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                style="color: red"
                @click="delBerbak(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col style="margin: 0 auto">
        <el-card>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              :total="Total"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  toRaw,
  onMounted,
  onBeforeMount,
  nextTick,
  shallowRef
} from "vue";
import {
  list,
  deleteleaber,
  createRecord,
  getUserIdentityRecords,
  updateRecord,
  export_biaoqian
} from "@/api/api";
import { v4 as uuidv4 } from "uuid";
import { Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
import { useNav } from "@/layout/hooks/useNav";
import fileDownload from "js-file-download";
defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: "Saomaqiang"
});
const { logout } = useNav();
const daochu = () => {
  export_biaoqian().then((res: any) => {
    fileDownload(res, "扫码枪标签.xlsx");
  });
};
const inputRef = shallowRef(null);
// 扫码
const dialogFormVisible = ref(false);
const form = ref({
  biaoqianma: "",
  name: "",
  idcard: "",
  acquisitionDate: ""
});
const biaoqianma = ref<any>("");
const now_id = ref<any>("");

const getQueryParams = (url: any) => {
  const paramArr = url.slice(url.indexOf("?") + 1).split("&");
  const params = {};
  paramArr.map(param => {
    const [key, val] = param.split("=");
    params[key] = decodeURIComponent(val);
  });
  return params;
};

const isInputDisabled = ref(false);
// 识别标签
const handleInputChange = () => {
  console.log(biaoqianma.value);

  // 判断是否有输入值
  if (biaoqianma.value) {
    isInputDisabled.value = true;
    const param = getQueryParams(biaoqianma.value);
    console.log(param);
    const data = ref({
      identityinformationId: param.id,
      userId: param.code
    });
    createRecord(data.value).then((res: any) => {
      console.log(res.data);
      if (res.code == 200) {
        biaoqianma.value = "";
        isInputDisabled.value = false;
        ElMessage({
          type: "success",
          message: "录入完成"
        });
        GetList();
        nextTick(() => {
          inputRef.value.focus();
        });
      } else if (res.code == 1010) {
        ElMessage({
          type: "error",
          message: "该标签已录入"
        });
        biaoqianma.value = "";
        isInputDisabled.value = false;
        nextTick(() => {
          inputRef.value.focus();
        });
      } else if (res.code == 401) {
        ElMessage({
          type: "error",
          message: "需要重新登录"
        });
        logout();
      }
    });
  }
};

//表格数据
const Data = ref<any>([]);
const currentPage = ref(1); // 当前页数
const pageSize = ref(100); // 每页条数
const Total = ref<number>(1); //总条数

// https://www.shlxkj.info:44330?id=${res.data.id}&code=${that.$store.state.userid}
const GetList = () => {
  const data = ref<any>({
    pageNum: currentPage.value,
    pageSize: pageSize.value
  });
  console.log(data.value);
  getUserIdentityRecords(data.value).then((res: any) => {
    console.log(res.items);
    if (res.code == 200) {
      Data.value = res.items.map((item, index) => {
        return {
          ...item,
          index: (currentPage.value - 1) * pageSize.value + (index + 1)
        };
      });
      Total.value = res.pagination.total;
    } else if (res.code == 401) {
      ElMessage({
        type: "error",
        message: "需要重新登录"
      });
      logout();
    }
  });
};

// 监听页码变化
const handleCurrentChange = val => {
  currentPage.value = val;
  GetList();
};

// 监听每页条数变化
const handleSizeChange = val => {
  pageSize.value = val;
};

//删除
const delBerbak = (row: any) => {
  ElMessageBox.confirm("确认删除?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      console.log(row);

      const data = ref<any>({
        id: row.id
      });
      updateRecord(data.value).then((res: any) => {
        console.log(res);
        if (res.code == 200) {
          message("删除成功", { type: "success" });
          GetList();
        } else if (res.code == 401) {
          ElMessage({
            type: "error",
            message: "登录重新登录"
          });
          logout();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

//关闭弹窗
const handleClose = (done: () => void) => {
  done();
};

onMounted(() => {
  GetList();
  nextTick(() => {
    inputRef.value.focus();
  });
});
</script>

<style lang="scss" scoped>
.active-button {
  background-color: #409eff;
  /* 设置按钮激活时的背景颜色 */
  color: white;
  /* 设置按钮激活时的文字颜色 */
}
</style>
